<template>
	<!-- <view class="uni-grid-wrap">
		<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
			<slot />
		</view>
	</view> -->
	<view class="my">
		<view class="listBox">
			<!-- v-if="index !=1 || (index == 1 && is_dividend)" -->
			<view class="" v-for="(i,index) in three4List" :key="index" @tap.stop="Jump(i.path)"
				:style="{borderBottom:index !=7 ? '2rpx soild rgba(217, 217, 217, 0.4);':'none'}" >
				<view class="list_A">
					<view class="ss-flex ss-col-center">
						<image :src="i.url" mode="widthFix"></image>
						<view class="text">{{i.title}}</view>
					</view>
					<button class="ss-reset-button ss-flex ss-col-center ss-row-center" v-if="i.title=='我的订单' && toPay != 0">
						<view class="num ss-m-y-4 ss-m-x-4">
							{{toPay}}
						</view>
						<text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx"></text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		computed,
		watch
	} from 'vue';
	// #ifdef APP-NVUE
	const dom = uni.requireNativePlugin('dom');
	// #endif

	/**
	 * Grid 宫格
	 * @description 宫格组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
	 * @property {Number} column 每列显示个数
	 * @property {String} borderColor 边框颜色
	 * @property {Boolean} showBorder 是否显示边框
	 * @property {Boolean} square 是否方形显示
	 * @property {Boolean} Boolean 点击背景是否高亮
	 * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
	 */
	import sheep from '@/sheep';

	// watch(userInfo, (val) => {
	// 	if (val) {
	// 		console.log(val.is_dividend, '监听：',three3List)
	// 		if (val.is_dividend == false || !val.is_dividend) {
	// 			this.three3List.splice(1, 1)
	// 		}
	// 	}
	// })
	
	export default {
		name: 'UniGrid',
		emits: ['change'],
		props: {
			// 每列显示个数
			column: {
				type: Number,
				default: 3
			},
			// 是否显示边框
			showBorder: {
				type: Boolean,
				default: true
			},
			// 边框颜色
			borderColor: {
				type: String,
				default: '#D2D2D2'
			},
			// 是否正方形显示,默认为 true
			square: {
				type: Boolean,
				default: true
			},
			highlight: {
				type: Boolean,
				default: true
			},

		},

		provide() {
			return {
				grid: this
			}
		},
		data() {
			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
			return {
				elId,
				toPay: '',
				width: 0,
				three4List: [],
				three3List: [{
						url: '/static/icon_1.png',
						title: '我的团队',
						path: '/pages/user/wallet/myTeam'
					},
					{
						url: '/static/icon_2.png',
						title: '合伙人分红',
						path: '/pages/user/wallet/red'
					},
					{
						url: '/static/icon_3.png',
						title: '收/支明细',
						path: '/pages/user/wallet/details'
					},
					{
						url: '/static/icon_4.png',
						title: '我的订单',
						path: '/pages/order/list?type=0'
					},
					{
						url: '/static/icon_5.png',
						title: '地址管理',
						path: '/pages/user/address/list?type=1'
					}, {
						url: '/static/icon_6.png',
						title: '授权中心',
						path: '/pages/my/train'
					},
					{
						url: '/static/icon_7.png',
						title: '分享',
						path: '/pages/user/wallet/share'
					},
					{
						url: '/static/icon_8.png',
						title: '设置',
						path: '/pages/public/setting'
					}
				],
				is_dividend: false,
			}
		},
		created() {
			this.children = []
			this.toPay = sheep.$store('user').numData.order_num.unpaid
			// this.is_dividend = sheep.$store('user').userInfo.is_dividend
			// if (this.is_dividend == false || !this.is_dividend) {
			// 	this.three3List.splice(1, 1)
			// }
		},
		mounted() {
			this.$nextTick(() => {
				this.init()
			})
		},
		computed: {
			userInfo() {
				return sheep.$store('user').userInfo
			}
		},
		watch: {
			userInfo: {
				handler(newVal){
					if(newVal){
						if (!newVal.is_dividend) {
							this.three4List = this.three3List.filter(i => i.title != '合伙人分红')
						} else {
							this.three4List = this.three3List;
						}
					}

				},
				deeper:true,
				immediate:true
			}
		},
		methods: {
			// 跳转
			Jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			init() {
				setTimeout(() => {
					this._getSize((width) => {
						this.children.forEach((item, index) => {
							item.width = width
						})
					})
				}, 50)
			},
			change(e) {
				this.$emit('change', e)
			},
			_getSize(fn) {
				// #ifndef APP-NVUE
				uni.createSelectorQuery()
					.in(this)
					.select(`#${this.elId}`)
					.boundingClientRect()
					.exec(ret => {
						this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
						fn(this.width)
					})
				// #endif
				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
					this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
					fn(this.width)
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		width: 100vw;

		.listBox {
			width: 92%;

			.list_A {
				width: 100%;
				padding: 24rpx 20rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				border-bottom: 2rpx solid rgba(217, 217, 217, 0.4);

				.num {
					background-color: #E84010;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					color: #fff;
					line-height: 30rpx;
					font-size: 20rpx;
				}

				image {
					width: 30rpx;
					margin-right: 30rpx;
				}

				.text {
					font-size: 30rpx;
					font-weight: 400;
					margin-top: 2rpx;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	.uni-grid-wrap {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: column;
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
	}

	.uni-grid {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		// flex: 1;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.uni-grid--border {
		position: relative;
		/* #ifdef APP-NVUE */
		border-left-color: #D2D2D2;
		border-left-style: solid;
		border-left-width: 0.5px;
		/* #endif */
		/* #ifndef APP-NVUE */
		z-index: 1;
		border-left: 1px #D2D2D2 solid;
		/* #endif */
	}
</style>